<template>
	<jf-navigation through @getHeight="getNavigationHeight">{{$t('login.forget.navigation')}}</jf-navigation>
	<image src="@/static/images/guide/bg.png" class="bg"></image>
	<view class="forget" :style="{'--navigationHeight': data.navigationHeight + 'rpx'}">
		<view class="forget_step" :style="{'--step': data.step}">
			<view class="forget_step_dot active"></view>
			<view class="forget_step_dot" :class="{'active': data.step >= 1}"></view>
			<view class="forget_step_dot" :class="{'active': data.step >= 2}"></view>
		</view>
		<view class="forget_step_labels">
			<view :class="{'active': data.step >= 0}">{{$t('login.forget.step1')}}</view>
			<view :class="{'active': data.step >= 1}">{{$t('login.forget.step2')}}</view>
			<view :class="{'active': data.step >= 2}">{{$t('login.forget.step3')}}</view>
		</view>
		
		<view class="forget_form" v-if="data.step === 0">
			<view class="form_menu">
				<view :class="{'active': data.currentIndex === 0}" @click="handleChange(0)">{{$t('login.forget.menu1')}}</view>
				<view :class="{'active': data.currentIndex === 1}" @click="handleChange(1)">{{$t('login.forget.menu2')}}</view>
			</view>
			<swiper :duration="200" :current="data.currentIndex" class="forget_form_swiper" disable-touch>
				<swiper-item>
					<jf-input :icon="email" :placeholder="$t('login.forget.placeholderEmail')" :disabled="data.loading" v-model="form.email"></jf-input>
					<jf-input :icon="email" :placeholder="$t('login.forget.placeholderEmailCode')" :disabled="data.loading" v-model="form.emailCode" :maxlength="6">
						<template #right>
							<view class="form_code" @click="send(1)">{{$t(emailSms.prompt)}}</view>
						</template>
					</jf-input>
				</swiper-item>
				<swiper-item>
					<jf-input :icon="phone" :placeholder="$t('login.forget.placeholderPhone')" :disabled="data.loading" v-model="form.phone"></jf-input>
					<jf-input :icon="phone" :placeholder="$t('login.forget.placeholderPhoneCode')" :disabled="data.loading" v-model="form.phoneCode" :maxlength="6">
						<template #right>
							<view class="form_code" @click="send(2)">{{$t(phoneSms.prompt)}}</view>
						</template>
					</jf-input>
				</swiper-item>
			</swiper>
			<view class="forget_form_btns">
				<view @click="router.redirect({url:'/pages/login/register/register',disabled:data.loading})">{{$t('login.forget.register')}}</view>
			</view>
			<view class="form_submit">
				<zq-button-ts :loading="data.loading" @click="next()">{{$t('login.forget.next')}}</zq-button-ts>
			</view>
		</view>
		<view class="forget_form" v-if="data.step === 1">
			<view class="forget_form_header"></view>
			<jf-input :icon="password" password :placeholder="$t('login.forget.placeholderPassword')" :disabled="data.loading" v-model="form.password" :maxlength="20"></jf-input>
			<jf-input :icon="password" password :placeholder="$t('login.forget.placeholderResetPassword')" :disabled="data.loading" v-model="form.resetPassword" :maxlength="20"></jf-input>
			<view class="form_submit">
				<zq-button-ts :loading="data.loading" @click="confirm()">{{$t('login.forget.submit')}}</zq-button-ts>
			</view>
		</view>
		<view class="forget_form" v-if="data.step === 2">
			<view class="forget_success">
				<image src="@/static/images/common/success_icon.png"></image>
				<view>{{$t('login.forget.success')}}</view>
			</view>
			<view class="form_submit">
				<zq-button-ts :loading="data.loading" @click="login()">{{$t('login.forget.login')}}</zq-button-ts>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { reactive, getCurrentInstance } from "vue"
	import email from "@/static/images/common/input_icon_email.png"
	import phone from "@/static/images/common/input_icon_phone.png"
	import password from "@/static/images/common/input_icon_password.png"
	import Form from "@/static/utils/Form"
	import Route from "@/static/utils/Route"
	import { sendSms, resetPassword } from "@/api/login"
	
	const { proxy } = getCurrentInstance()
	const router = new Route();
	const data = reactive({
		navigationHeight: 0,
		currentIndex: 0,
		step: 0,
		loading: false
	})
	const form = reactive({
		email: undefined,
		phone: undefined,
		emailCode: undefined,
		phoneCode: undefined,
		password: undefined,
		resetPassword: undefined
	})
	const emailSms = reactive(Form.getSms({
		name: 'email',
		api: sendSms,
		prompt: 'common.sms.begin',
		sendMessage: 'common.sms.send',
		successMessage: 'common.sms.success',
		failMessage: 'common.sms.fail',
		againMessage: 'common.sms.again',
		disabled: data.loading
	}))
	const phoneSms = reactive(Form.getSms({
		name: 'phone',
		api: sendSms,
		prompt: 'common.sms.begin',
		sendMessage: 'common.sms.send',
		successMessage: 'common.sms.success',
		failMessage: 'common.sms.fail',
		againMessage: 'common.sms.again',
		disabled: data.loading
	}))
	
	const send = (type: number):void => {
		if(data.loading) return
		if(type === 1){
			if(Form.checkRegEx(form.email, 'email')){
				emailSms.queryParams = {
					type: 1,
					email: form.email
				}
				Form.sendSmsCode(emailSms)
			}else{
				uni.showToast({
					title: proxy.$t('common.sms.emailError'),
					icon: "none"
				})
			}
		}else{
			if(form.phone){
				phoneSms.queryParams = {
					type: 2,
					phone: form.phone
				}
				Form.sendSmsCode(phoneSms)
			}else{
				uni.showToast({
					title: proxy.$t('common.sms.phoneError'),
					icon: "none"
				})
			}
		}
	}
	const getNavigationHeight = (height:number):void =>{
		data.navigationHeight = height
	}
	const handleChange = (currentIndex: 0 | 1):void =>{
		if(data.loading) return
		if(data.currentIndex !== currentIndex){
			Form.resetForm(form);
		}
		data.currentIndex = currentIndex
	}
	const next = ():void =>{
		if(data.currentIndex === 0 && !form.email){
			uni.showToast({
				title: proxy.$t('login.forget.placeholderEmail'),
				icon: "none"
			})
		}else if(data.currentIndex === 0 && !form.emailCode){
			uni.showToast({
				title: proxy.$t('login.forget.placeholderEmailCode'),
				icon: "none"
			})
		}else if(data.currentIndex === 1 && !form.phone){
			uni.showToast({
				title: proxy.$t('login.forget.placeholderPhone'),
				icon: "none"
			})
		}else if(data.currentIndex === 1 && !form.phoneCode){
			uni.showToast({
				title: proxy.$t('login.forget.placeholderPhoneCode'),
				icon: "none"
			})
		}else{
			data.step = 1;
		}
	}
	const confirm = ():void =>{
		if(!form.password || form.password.length < 6 || form.password.length > 20){
			uni.showToast({
				title: proxy.$t('login.forget.placeholderPassword'),
				icon: "none"
			})
		}else if(form.password !== form.resetPassword){
			uni.showToast({
				title: proxy.$t('login.forget.placeholderDisaffinityPassword'),
				icon: "none"
			})
		}else{
			data.loading = true;
			const upjson = {
				account: data.currentIndex === 0 ? form.email : form.phone,
				password: form.password,
				code: data.currentIndex === 0 ? form.emailCode : form.phoneCode,
				type: data.currentIndex === 0 ? 1 : 2
			}
			resetPassword(upjson).then(() => {
				data.step = 2;
			}).catch((error:any) => {
				uni.showToast({
					title: proxy.$t(error.msg),
					icon: "none"
				})
			}).finally(() => {
				data.loading = false;
			})
		}
	}
	const login = ():void =>{
		router.back({})
	}
</script>

<style lang="scss">
	.forget{
		--top: var(--navigationHeight);
		padding-top: var( --top );
		.forget_step{
			--bar-width: 560rpx;
			position: relative;
			width: var(--bar-width);
			height: 8rpx;
			background: #FFFFFF;
			margin: 62rpx 0 0 96rpx;
			&::before{
				position: absolute;
				content: "";
				width: calc(var(--bar-width) / 2 * var(--step));
				height: 8rpx;
				background: var(--background);
				border-radius: 4rpx;
			}
			.forget_step_dot{
				position: absolute;
				top: -8rpx;
				width: 24rpx;
				height: 24rpx;
				background: #FFFFFF;
				border-radius: 12rpx;
				&:nth-child(2){
					left: 50%;
					transform: translateX(-50%);
				}
				&:nth-child(3){
					right: 0;
				}
				&.active{
					background: var(--background);
				}
			}
		}
		.forget_step_labels{
			width: 648rpx;
			margin: 24rpx 0 62rpx 48rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			view{
				width: 216rpx;
				font-size: 24rpx;
				color: #7C8493;
				font-weight: 400;
				flex-shrink: 0;
				line-height: 34rpx;
				&:nth-child(2){
					text-align: center;
				}
				&:nth-child(3){
					text-align: right;
				}
				&.active{
					color: var(--color-primary);
				}
			}
		}
		.forget_form{
			position: relative;
			width: 100vw;
			height: calc(100vh - var(--top) - 190rpx);
			background: #ffffff;
			border-radius: 56rpx 56rpx 0 0;
			.forget_form_swiper{
				width: 100vw;
				height: 272rpx;
			}
			.forget_form_btns{
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				width: 654rpx;
				font-size: 24rpx;
				color: var(--color-primary);
				line-height: 33rpx;
				margin-left: 48rpx;
				font-weight: 500;
			}
			.forget_form_header{
				width: 100vw;
				height: 72rpx;
			}
			.forget_success{
				width: 100vw;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding-top: 140rpx;
				font-size: 36rpx;
				font-weight: 500;
				color: var(--color-primary);
				image{
					width: 160rpx;
					height: 160rpx;
					margin-bottom: 32rpx;
				}
			}
		}
	}
	
</style>